<template>
	<div :id="id" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
	props: {
		chartOpts: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		this.chartIns = null;
		return {
			id: `echart-${this.$quinn.guid()}`,
		};
	},
	computed: {
		optionsStr() {
			return JSON.stringify(this.chartOpts);
		},
	},
	watch: {
		optionsStr(newValue, oldValue) {
			if (newValue !== oldValue && this.chartIns)
				this.chartIns.setOption(this.chartOpts);
		},
	},
	mounted() {
		this.chartIns = this.$echarts.init(document.getElementById(this.id));
		//随着屏幕大小调节图表
		window.addEventListener("resize", () => {
			this.chartIns.resize();
		});
	},
	methods: {},
};
</script>

